<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id='id' border='1' cellpadding="5" cellspacing="0"></table>
    <script>
        function createTableFn(el,options ={}){
            let els=document.querySelector(el);
            let html="";
            let thHtml="";
            options.clumns.forEach(thitem=> {
                thHtml += `<th>${item["title"]}</th>`
            });
            html += `<tr>${thHtml}</tr>`
            options.data.forEach((item,index)=>{
                let tdHtml =""
                options.clumns.forEach(tditem=>{
                    tdHtml +=`<td>${item[tditem.field]}</td>`
                })
                html += `<tr>${tdHtml}</tr>`
            })
            els.innerHTML = html
        }
        createTableFn('#id',{
            data:[
               {id:1,title:'a',price:1.11}, 
               {id:2,title:'a',price:1.11},
               {id:3,title:'a',price:1.11}
            ],
            colums:[
                {title:"编号",field:'id'},
                {title:"标题",field:'title'},
            ],
        })
    </script>
</body>
</html>